<template>
<<<<<<< HEAD
  <div class="container">
    <div class="top-container">
      <div>
        <span>叩丁狼电商运营平台</span>
        <el-icon @click="hdCollapse">
          <icon-menu />
        </el-icon>
      </div>
      <!-- 下拉菜单 -->
      <el-dropdown @command="onCommand">
        <span class="el-dropdown-link">
          {{ username }}
          <el-icon class="ArrowDown">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="home">首页</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
=======
    <div class="container">
        <div class="top-container">
            <div>
                <span>叩丁狼电商运营平台</span>
                <el-icon @click="hdCollapse">
                    <icon-menu />
                </el-icon>
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown @command="onCommand">
                <span class="el-dropdown-link">
                    {{ username }}
                    <el-icon class="ArrowDown">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="home">首页</el-dropdown-item>
                        <el-dropdown-item command="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="bottom-container">
            <div class="menus-container">
                <el-menu active-text-color="#409eff" background-color="#304156" class="el-menu-vertical-demo"
                    unique-opened text-color="#fff" :collapse="isCollapse" :router="true"
                    :default-active="defaultActive">
                    <el-menu-item index="/index">
                        <el-icon>
                            <icon-menu />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu :index="item.name" v-for="item in sortMenus" :key="item.id">
                        <!-- 一级菜单 -->
                        <template #title>
                            <el-icon>
                                <icon-menu />
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item v-for="el in item.children" :index="'/' + item.name + '/' + el.name"> {{ el.title
                        }}
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="main-container">
                <!-- 面包屑 -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
                    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                </el-breadcrumb>
                <RouterView />
            </div>
        </div>
>>>>>>> 784cbbb2eb84283acd71e1f01565598958843f96
    </div>
    <div class="bottom-container">
      <div class="menus-container">
        <el-menu
          active-text-color="#409eff"
          background-color="#304156"
          class="el-menu-vertical-demo"
          unique-opened
          text-color="#fff"
          :collapse="isCollapse"
          :router="true"
          :default-active="defaultActive"
        >
          <el-menu-item index="/index">
            <el-icon>
              <icon-menu />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu
            :index="item.name"
            v-for="item in sortMenus"
            :key="item.id"
          >
            <!-- 一级菜单 -->
            <template #title>
              <el-icon>
                <icon-menu />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              v-for="el in item.children"
              :index="'/' + item.name + '/' + el.name"
            >
              {{ el.title }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main-container">
        <!-- 面包屑 -->
        <el-affix   :offset="70">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <template v-if="routeTitle !== '首页'">
                <el-breadcrumb-item :to="{ path: parentRoutePath }">{{
                  parentRouteTitle
                }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ routeTitle }}</el-breadcrumb-item>
              </template>
            </el-breadcrumb>
          </div>
        </el-affix>
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
<<<<<<< HEAD
import { Menu as IconMenu, Location, ArrowDown } from "@element-plus/icons-vue";
import { useCounterStore } from "@/stores/menus";
=======
import {
    Menu as IconMenu,
    Location,
    ArrowDown,
} from '@element-plus/icons-vue'
import { useMenusStore } from "@/stores/menus";
>>>>>>> 784cbbb2eb84283acd71e1f01565598958843f96
import { useUserInfoStore } from "@/stores/userInfo";
import { computed } from "@vue/reactivity";
import { RouterView, useRoute, useRouter } from "vue-router";
import { ref, watch, type Ref } from "vue";
import Cookies from "js-cookie";
import * as api from "@/request/api";

// console.log(useCounterStore().sortMenus);
<<<<<<< HEAD
let menuStore = useCounterStore();
// console.log(sortMenus);
let sortMenus = computed(() => {
  return menuStore.sortMenus;
});
=======
let menuStore = useMenusStore()
// console.log(sortMenus);
let sortMenus = computed(() => {
    return menuStore.sortedMenus
})
>>>>>>> 784cbbb2eb84283acd71e1f01565598958843f96
// 菜单栏折叠
let isCollapse = ref(false);
let hdCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
// 进来默认高亮的菜单
let defaultActive = ref("/index");
let parentRouteTitle: Ref<string> = ref("");
let parentRoutePath: Ref<string> = ref("");
let routeTitle: Ref<string> = ref("");
// 监听路由跳转，判断当前在哪个页面，从而知道菜单栏哪个子页面要高亮
watch(
  useRoute(),
  (newval) => {
    // console.log(newval);
    defaultActive.value = newval.path;
    parentRouteTitle.value = newval.meta.parentTitle as string;
    parentRoutePath.value = newval.meta.parentPath as string;
    routeTitle.value = newval.meta.title as string;
  },
  {
    immediate: true, // 立即监听
  }
);
// 下拉菜单的用户名
let username = ref("");
const userInfoStore = useUserInfoStore();
username.value = userInfoStore.username;
// 下拉菜单的点击事件
const router = useRouter();
let onCommand = (command: string | number | object) => {
  console.log(command);
  if (command === "home") {
    router.push("/index");
  } else if (command === "logout") {
    api.admin.logout();
    // console.log("logout");
    // 清除列表数据
    menuStore.updateMenus([]);
    // 清除个人信息
    userInfoStore.updateUserInfo("", []);
    // 清除token
    Cookies.remove("token");
    router.push("/login");
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top-container {
    height: 70px;
    background-color: #409eff;
    // line-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      color: #fff;
      font-size: 25px;
      margin: 0px 25px;
    }

    .el-icon {
      font-size: 20px;
      color: #fff;
    }

    .el-dropdown-link {
      font-size: 15px;

      .el-icon {
        font-size: 13px;
      }
    }
  }

  .bottom-container {
    display: flex;
    flex: 1;
    overflow: hidden;

    .menus-container {
      // width: 250px;
      height: 100%;
      overflow-y: auto;
      background-color: rgb(48, 65, 86);
      color: #fff;
      text-align: center;

      &::-webkit-scrollbar {
        width: 0; //滚动条的样式
      }

      .el-menu {
        height: 100%;
      }
    }

    .main-container {
      flex: 1;
      overflow-y: auto;
    }
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
}

.breadcrumb {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
</style>
